<template>
    <div>
        <!-- Swiper信息 -->
        <div class="swiper-container  h-[300px]  shadow-xl rounded-md">
            <t-swiper class="h-full" :duration="2000" :interval="4000" :navigation="{ placement: 'outside' }">
                <t-swiper-item v-for="(item, index) in swiperList" :key="index">
                    <div class="swiper-img ">
                        <t-image :src="item.thumbnail" fit="contain" :style="{ width: '100%', height: '300px' }" />
                    </div>
                    <div
                        class="swiper-title relative z-[9999999] bottom-[55px] text-center text-lg bg-black/60 py-[15px]">
                        <router-link class="text-white" :to="`/topic/${item.cs_id}`">
                            {{ item.title }}
                        </router-link>
                    </div>
                </t-swiper-item>
            </t-swiper>
        </div>
    </div>
</template>

<script setup lang="ts">
// 定义props
const props = defineProps({
    swiperList: {
        type: Array,
        default: []
    }
})


</script>

<style scoped></style>